<template>
  <div>
    <a-form ref="staticForm" size="medium" :model="form" :wrapper-col-props="{ span: 12 }">
      <!--  -->
      <div>
        <a-form-item field="barCode" required :label="t['条形码']">
          <a-input v-model="form.barCode" allow-clear :max-length="120" />
        </a-form-item>

        <a-form-item
          field="goodsName"
          :label="t['商品名称']"
          :rules="{ required: true, message: t['必填'] }"
        >
          <a-input v-model="form.goodsName" :max-length="100" allow-clear />
        </a-form-item>
        <a-form-item field="salePrice" :label="t['促销价']">
          <a-input-number
            v-model="form.salePrice"
            allow-clear
            :precision="5"
            mode="button"
            :step="0.1"
            :min="0"
          />
        </a-form-item>
        <a-form-item field="retailPrice" :label="t['零售价']">
          <a-input-number v-model="form.retailPrice" allow-clear mode="button" :precision="5" />
        </a-form-item>
        <a-form-item field="memberPrice" :label="t['会员价']">
          <a-input-number v-model="form.memberPrice" allow-clear :precision="5" mode="button" />
        </a-form-item>
        <a-form-item field="category" :label="t['分类']">
          <a-select v-model="form.category" allow-clear :options="categoryList"> </a-select>
        </a-form-item>

        <a-form-item field="share" :label="t['是否共享']">
          <a-radio-group v-model="form.share" :options="translateOptions(isList)" allow-clear />
        </a-form-item>
        <a-divider />

        <div class="grid">
          <a-form-item
            v-for="item in fields"
            :key="item.key"
            :label-col-props="{ span: 8 }"
            :wrapper-col-props="{ span: 16 }"
            :field="item.key"
            :label="t[item.label] || item.label"
            allow-clear
          >
            <a-input v-model="(form as any)[item.key]" allow-clear />
          </a-form-item>
        </div>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { addGoods, updateGoods } from "@/api/service/goods/goods";
import { isList } from "@/data/options/selection";
import { useEventBus } from "@vueuse/core";
import { form, showGoods } from "../data/form";
import { categoryList } from "../data/table";
import { fields } from "./data";

const staticForm = ref();

const props = defineProps<{
  getList: any;
}>();

const t = translate("公共模块");

const bus = useEventBus("submit");

const validate = async () => {
  try {
    const result = await staticForm.value.validate();
    let res: any;
    if (!result) {
      if (form.value.goodsId) {
        res = await updateGoods(form.value);
      } else {
        res = await addGoods(form.value);
      }
      if (!res.code) {
        form.value.barCode = "";
        form.value.goodsName = "";
        return;
      }

      showGoods.value = false;
      props.getList();
    }
  } catch (error) {
    // console.log(error);
  }
};
// .then(async(res) => {
// });
bus.on(() => {
  validate();
});
</script>

<style lang="scss" scoped>
input {
  border: 1px solid #eee;
  line-height: 30px;
}
.grid {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 12px;
}
</style>
